当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。
DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。我们可以将 DOM 视为连接 HTML 和 JavaScript 的接口。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML,比如:
- 改变页面中的所有 HTML 元素
- 改变页面中的所有 HTML 属性
- 改变页面中的所有 CSS 样式
- 对页面中的所有事件做出反应
查找 HTML 元素
通常,通过 JavaScript 找到元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
通过 id 查找 HTML 元素
语法:document.getElementById('id')
功能:返回对拥有指定 id
的第一个对象的引用
返回值:DOM 对象
说明:id
为 DOM 元素上 id
属性的值
|
|
通过标签名查找 HTML 元素
|
|
通过类名查找 HTML 元素在只适用于 IE9 以上。
修改元素样式
语法:ele.style.styleName = styleValue
功能:设置 ele
元素的 CSS 样式
|
|
获取和修改标签内内容
语法:ele.innerHTML
功能:返回元素开始标签和结束标签之间的 HTML
语法:ele.innerHTML = "hello"
功能:设置元素开始标签和结束标签之间的 HTML
|
|
获取和修改元素的 class 属性
语法:ele.className
功能:返回元素的 class 属性
语法:ele.className = "hello"
功能:设置返回元素的 class 属性
|
|
获取和修改元素属性
元素的属性有标准属性和自定义属性两种,标准属性是指 HTML 元素自身具有的属性,自定义属性既是我们自己给元素添加的属性。
获取和修改标准属性
|
|
获取和修改自定义属性
语法:ele.getAttribute("key")
|
|
添加自定义属性
语法:ele.setAttribute("key", value)
|
|
删除属性
语法:ele.removeAttribute("key")
|
|